<template>
  <div class="nva_menu_container">
    <div class="menu_container wst">
      <contSidevar name="管理员管理" :siderList="list" @handleAcitve="handleAcitve" :activeItem="activeItem"></contSidevar>
    </div>
    <div class="container">
      <a class="back" @click="$router.push({name: 'adminManagement', query: {item: $route.query.item}})"><i class="el-icon-back"></i><span>返回</span></a>
      <P class="middle-font">新增管理员</P>
      <el-form ref="form" :model="form" label-width="140px" style="width:60%">
        <el-form-item label="管理员姓名">
          <el-input v-model="form.userNmae"></el-input>
        </el-form-item>
        <el-form-item label="管理员角色">
          <el-input v-model="form.roleKey"></el-input>
        </el-form-item>
        <el-form-item label="管理员账号">
          <el-input v-model="form.LoginName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password "></el-input>
        </el-form-item>
        <el-form-item label="所在区域">
          <!-- <el-input ></el-input> -->
          <p>镇海区</p>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <span class="fuzhu"></span>
      <div class="btn">
        <a href="" class="save">确定</a>
        <a href="javascript:;" class="cancel" @click="$router.push({name: 'adminManagement'})">取消</a>
      </div>
    </div>
  </div>
</template>

<script>
import contSidevar from '@/components/ContSidebar.vue'
export default {
  data () {
    return {
      form: {
        userName: '',
        roleKey: '',
        LoginName: '',
        password: '',
        phoneNumber: '',
        email: ''
      },
      list: [
        { id: 1, name: '海曙区' },
        { id: 2, name: '江北区' },
        { id: 3, name: '鄞州区' },
        { id: 4, name: '镇海区' },
        { id: 5, name: '高新区' },
        { id: 6, name: '慈溪市' },
        { id: 7, name: '象山县' }
      ],
      activeItem: 1
    }
  },
  components: {
    contSidevar
  },
  mounted () {
    this.activeItem = this.$route.query.item
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
  .back
    cursor pointer
    font-size 14px
    color color
    span
      margin-left 10px
  .big-font
    font-size 18px
    font-weight bold
  .middle-font
    line-height 46px
    font-size 16px
    font-weight bold
  .ann
    color #e0e0e0
    .diy-input
      width 58px
      height 30px
      line-height 30px
      font-size 18px
      border-radius 5px
      border 1px solid #e0e0e0
      margin 0 6px
      text-align center
  .btn
    a
      display inline-block
      width 70px
      height 38px
      text-align center
      line-height 38px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      &.save
        background color
      &.cancel
        color color
        border 1px solid color

</style>
